<template>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="paginationData.pageNum"
                   :page-sizes="[10,20,30,40,50,100]"
                   :page-size="paginationData.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="paginationData.totalNum">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: ['paginationData'],
  data () {
    return {

    };
  },
  methods: {
    handleSizeChange (val) {
      this.paginationData.pageSize = val;
      // console.log(`每页 ${val} 条`);
      this.$emit('paginationDataNew', this.paginationData);
    },
    handleCurrentChange (val) {
      this.paginationData.pageNum = val;
      // console.log(`当前页: ${val}`);
      this.$emit('paginationDataNew', this.paginationData);
    },
  },
  mounted () {

  }
};
</script>

<style lang='scss'>
.pagination {
    margin: 20px 0;
    text-align: center;
}
</style>